<template>
  <div class="app-container">
    <!-- 新增车辆---车辆信息 -->
    <div>
      <el-steps :active="active" finish-status="success" align-center space="200px">
        <el-step title="车辆信息"></el-step>
        <el-step title="权限分配"></el-step>
      </el-steps>
      <el-form :model="inputModel" :inline="true" :rules="rules" class="form1">
        <el-form-item label="车牌号:" prop="plateNumber">
          <el-input style="width:2rem" v-model="inputModel.plateNumber" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="interval-left" label="车牌颜色:" prop="plateColor">
          <el-select v-model="inputModel.plateColor" placeholder="请选择">
            <el-option v-for="item in carColorMenu" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="interval-left" label="车辆类型:" prop="carType">
          <el-select v-model="inputModel.carType" placeholder="请选择">
            <el-option v-for="item in carTypeMenu" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="inputModel" :inline="true" :rules="rules" class="form2">
        <el-form-item label="司机姓名:" prop="driverName">
          <el-input style="width:2rem" v-model="inputModel.driverName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="interval-left" label="司机电话:" prop="driverTel">
          <el-input style="width:2rem" v-model="inputModel.driverTel" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="interval-left" label="身份证号:" prop="driverIDNumber">
          <el-input style="width:2rem" v-model="inputModel.driverIDNumber" placeholder=""></el-input>
        </el-form-item>
      </el-form>

      <el-form :model="inputModel" :inline="true" :rules="rules" class="form2">
        <el-form-item label="车辆类别:" prop="carCategory">
          <el-select v-model="inputModel.carCategory" placeholder="请选择">
            <el-option v-for="item in carSortMenu" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="interval-left" label="启用状态:" prop="state">
          <el-switch v-model="inputModel.state"></el-switch>
        </el-form-item>
      </el-form>
      <el-form :model="inputModel" :inline="true" :rules="rules" class="form2">
        <el-form-item style="margin-left: 2.3rem;" label="备注:">
          <el-input style="width: 5rem;" type="textarea" :rows="4" placeholder="请输入内容" v-model="inputModel.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button style="margin-left:25%;" type="primary" @click="next">下一步</el-button>
      <el-button style="margin-left:0.2rem;" @click="back">取消</el-button>
    </div>
  </div>
</template>

<script>

import { getApiCarList } from "@/api/Car";

export default {
  data() {
    return {
      active: 0,
      inputModel: {
        plateNumber: '',
        plateColor: -1,
        carCategory: 0,
        carType: 0,
        driverName: '',
        driverTel: '',
        driverIDNumber: '',
        state: true,
        remarks: ''
      },
      count: 0,
      currentPage: 1,
      total: 20,
      pageSize: 10,
      carColorMenu: [{ value: -1, label: '请选择' }, { value: 0, label: '黄色' }, { value: 1, label: '蓝色' }, { value: 2, label: '绿色' }],
      carTypeMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '大车' }, { value: 2, label: '小车' }],
      carSortMenu: [{ value: 0, label: '请选择' }, { value: 1, label: '固定车' }, { value: 2, label: '临时车' }],
      rules: {
        plateNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
        plateColor: [{ required: true, message: '请选择车牌颜色', trigger: 'blur' }],
        carType: [{ required: true, message: '请选择车辆类型', trigger: 'blur' }],
        driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
        driverTel: [{ required: true, message: '请输入司机电话', trigger: 'blur' }],
        carCategory: [{ required: true, message: '请选择车辆类别', trigger: 'blur' }],
        state: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  created() {

    if (this.$route.query.isback == true) {
      this.active = this.$route.query.active;
      this.inputModel = this.$route.query.inputModel
      console.log(this.$route.query.inputModel);
    }
  },
  methods: {
    warningMessageBox(content) {
      this.$message.error(content + '不能为空！')

    },
    next() {
      if (this.inputModel.plateNumber == '') {
        this.warningMessageBox('车牌号');
        return;
      }
      if (this.inputModel.plateColor == -1) {
        this.warningMessageBox('车牌颜色');
        return;
      }
      if (this.inputModel.carCategory == 0) {
        this.warningMessageBox('车辆类别');
        return;
      }
      if (this.inputModel.carType == 0) {
        this.warningMessageBox('车辆类型');
        return;
      }
      if (this.inputModel.driverName == '') {
        this.warningMessageBox('司机名称');
        return;
      }
      if (this.inputModel.driverTel == '') {
        this.warningMessageBox('司机电话');
        return;
      }
      console.log(this.getDataList());
      if (this.getDataList()) {
        this.$message.error('该车牌号已存在数据库！')
        return;
      }
      this.$router.push(
        {
          path: 'addVehiclePower',
          query: {
            active: 1,
            inputModel: this.inputModel
          }
        })
    },
    getDataList() {
      let isExistence = false;
      let data = {
        skipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
        MaxResultCount: this.pageSize,
      };
      if (this.inputModel.plateNumber != '') {
        data.plateNumber = this.inputModel.plateNumber;
      }
      getApiCarList(data).then(res => {
        if (res == null) return this.$vux.toast.text(res.message);
        else {
          if (res.totalCount > 0) {
            isExistence = true;
          }
        }
      });
      return isExistence;
    },
    handleEdit() {
      this.dialogFormVisible = true;
    },
    back() {
      this.$router.push({
        path: "vehicleManagement"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.form1 {
  margin-top: .1rem;
  margin-left: .4rem;
}

.form2 {
  margin-top: .3rem;
  margin-left: .3rem;
}

.interval-left {
  margin-left: .4rem;
}

.search-bar {
  margin-bottom: .2rem;
  margin-left: 10%;
  margin-top: .9rem;
}
</style>
